<nav class="mt-10 flex justify-between">
  {% if paginator.previous %}
    <span>
      <a href="{{ paginator.previous }}">
        <span class="inline-flex rounded-md shadow-sm">
          <span class="inline-flex items-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-blue active:bg-blue-700 transition ease-in-out duration-150">
           {{ res.previous_posts }}
          </span>
        </span>
      </a>
    </span>
  {% endif %}
  {% if paginator.next %}
    <span>
      <a href="{{ paginator.next }}">
        <span class="inline-flex rounded-md shadow-sm">
          <span class="inline-flex items-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-blue-600 hover:bg-blue-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-blue active:bg-blue-700 transition ease-in-out duration-150">
           {{ res.next_posts }}
          </span>
        </span>
      </a>
    </span>
  {% endif %}
</nav>
